---
title: "Server Browser"
permalink: "/games/"
js:
- /scripts/vendor/popper.js
- /scripts/vendor/jquery.hoverintent.min.js
- /scripts/server-browser.js
- /scripts/vendor/flot.js
- /scripts/vendor/flot-selection.js
- /scripts/vendor/flot-stack.js
- /scripts/vendor/flot-time.js
- /scripts/vendor/flot-tooltip.js
- /scripts/vendor/flot-resize.js
- /scripts/vendor/javascript-rrd.js
- /scripts/vendor/rrd-flot.js
- /scripts/vendor/rrd-flot-async.js
- /scripts/player-charts.js
---

<section class="site-section">
  <div class="site-section__content">
    <h1 class="site-section__heading">Server Browser</h1>
    <p class="text--large">People from around the world use OpenRA to play <strong>Red Alert</strong>, <strong>Command & Conquer</strong>, <strong>Dune 2000</strong>, and a variety of <strong>community mods</strong>. Use the server browser below to join in on the multiplayer fun!</p>
  </div>
</section>

<hr class="site-section__divider" />

<section id="server-browser" class="servers site-section">
  <div class="site-section__content">
    <div class="servers__controls">
      <div class="servers__filters">
        <label class="button">
          <input class="servers__filters__waiting" type="checkbox" checked /> Waiting
        </label>
        <label class="button">
          <input class="servers__filters__playing" type="checkbox" checked /> Playing
        </label>
        <label class="button">
          <input class="servers__filters__empty" type="checkbox" /> Empty
        </label>
      </div>
      <div class="servers__info text--small">
        <span class="servers__counts">Showing <var class="servers__server-count">0</var> servers hosting <var class="servers__player-count">0</var> players.</span>
        <button class="servers__refresh">Refresh</button>
      </div>
    </div>
    <div class="u-mobile-full-width">
      <table class="servers__list text--small table--hover-rows table--metal-panel">
        <thead class="servers__list__header">
          <tr>
            <th class="servers__list__header__name" colspan="2">
              <a class="servers__list__header__sort-toggle servers__sort__name" href="#sort-by-name">
                Name
                <svg class="icon">
                  <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-down' | relative_url }}"></use>
                </svg>
              </a>
            </th>
            <th class="servers__list__header__status">
              <a class="servers__list__header__sort-toggle servers__sort__status" href="#sort-by-status">
                Status
                <svg class="icon">
                  <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-down' | relative_url }}"></use>
                </svg>
              </a>
            </th>
            <th class="servers__list__header__players">
              <a class="servers__list__header__sort-toggle servers__sort__players" href="#sort-by-players">
                Players
                <svg class="icon">
                  <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-down' | relative_url }}"></use>
                </svg>
              </a>
            </th>
            <th class="servers__list__header__location">
              <a class="servers__list__header__sort-toggle servers__sort__location" href="#sort-by-location">
                Location
                <svg class="icon">
                  <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-down' | relative_url }}"></use>
                </svg>
              </a>
            </th>
          </tr>
        </thead>
        <tbody class="servers__list__body">
          <tr>
            <td>
              <noscript>JavaScript must be enabled to use the Server Browser</noscript>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="servers__list__tooltip-container" style="pointer-events: none;"></div>
</section>

<hr class="site-section__divider" />

<section class="site-section">
  <div class="site-section__content">
    <h2 class="site-section__heading">Player Activity</h2>
    <p>View the numbers of people <strong class="color--playing">playing</strong> and <strong class="color--waiting">waiting</strong> over the last two weeks:</p>
    <div
      id="players"
      class="flot-chart"
      style="width: 100%; height: 300px;">
      Loading...
    </div>
    <p>More detailed graphs are available at the <a href="{{ '/players/' | relative_url }}">player statistics</a> page.</p>
  </div>
</section>

<template id="server-row-template">
  <tr class="servers__listing">
    <td class="servers__listing__name"></td>
    <td class="servers__listing__join"></td>
    <td class="servers__listing__status"></td>
    <td class="servers__listing__players"></td>
    <td class="servers__listing__location"></td>
  </tr>
</template>

<template id="server-group-header-template">
  <tr class="servers__list__group">
    <td colspan="3">
      <div class="servers__list__group__info">
        <a class="servers__list__group__mod-link"></a>
        <span class="servers__list__group__version"></span>
      </div>
    </td>
    <td colspan="2">
      <span class="servers__list__group__players"><var></var></span>
    </td>
  </tr>
</template>

<template id="server-listing-tooltip-template">
  <div class="servers__list__tooltip">
    <div class="servers__list__tooltip__map">
      <div class="minimap">
        <var class="minimap__hash"></var>
        <div class="minimap__bounds">
          <img class="minimap__image" />
          <ul class="minimap__spawnpoints"></ul>
        </div>
      </div>
      <div class="servers__list__tooltip__map__title">-</div>
    </div>
    <div class="servers__list__tooltip__clients">
      <table>
        <thead>
          <tr>
            <th>Player</th>
            <th>Team</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</template>
